<template>
  <div class="full~ bg-gray-200 p-10px box-border flex flex-col">
    <div class="flex-none p-10px box-border bg-light-50 rounded between~">
      <div>项目列表</div>
      <create-project @success="getProjects"/>
    </div>
    <div class="mt-10px p-10px box-border bg-light-50 rounded">
      <div class="center~ full~ text-gray-400" v-if="projectList === null || projectList?.length === 0">
        <no-content size="200"/>
      </div>
      <div v-else class="flex w-full">
        <n-grid cols="2 s:3 m:4 l:5 xl:6 2xl:7" responsive="screen" x-gap="8">
          <n-grid-item v-for="(item, index) of projectList" :key="index">
            <div class="text-xs">
              <div class="image~ w-100px h-100px"
                   :style="{backgroundImage: `url(http://127.0.0.1:8081/static/project/${item.project_cover})`}"></div>
              <div class="flex mt-10px">
                <div>项目名称:</div>
                <div>{{ item.project_name }}</div>
              </div>
              <div class="flex mt-10px">
                <div>项目简介:</div>
                <div>{{ item.project_desc }}</div>
              </div>
            </div>
          </n-grid-item>
        </n-grid>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref} from "vue";
import {useAllProjects} from "../hooks"
import {NGrid, NGridItem, useMessage} from "naive-ui";
import CreateProject from "@/pages/project/components/CreateProject.vue";
import NoContent from "@/components/viewComponents/NoContent.vue";
import {ProjectItem} from "@/pages/project/type";

export default defineComponent({
  components: {CreateProject, NoContent, NGrid, NGridItem},
  setup() {
    const message = useMessage()
    const projectList = ref<ProjectItem[]>([])

    onMounted(() => {
      getProjects()
    })

    async function getProjects() {
      const result = await useAllProjects()
      if (result.code !== 1000) {
        message.error("获取项目列表失败")
      } else {
        console.log(result.data)
        projectList.value = result.data
      }
    }

    return {
      getProjects,
      projectList
    }
  }
})


</script>


<style scoped>

</style>